<script setup lang="ts">
import { ref } from 'vue'
import LoginForm from '../components/LoginForm.vue'

const formType = ref('login')

const bindLeftWidth = ref('500px')

const goEquipmentFiling = () => {
  window.open('https://beian.miit.gov.cn/')
}
</script>

<template>
  <div class="login-wrapper">
    <div class="center-container">
      <div class="left-container"></div>
      <div class="right-container">
        <LoginForm v-if="formType === 'login'"></LoginForm>
      </div>
    </div>
    <div class="equipment-filing" @click="goEquipmentFiling">滇ICP备19011267号-6</div>
  </div>
</template>

<style lang="scss" scoped>
.login-wrapper {
  @include rect(100%, 100%);
  @include background-image('../imgs/bg.png', 100%, 100%);
  position: relative;
  .center-container {
    @include rect(1000px, 580px);
    @include flex(row, flex-start, center);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    box-shadow: 0px 8px 20px 0px rgba(0, 18, 39, 0.12);
    border-radius: 2px;
    .left-container {
      @include rect(v-bind(bindLeftWidth), 100%);
      @include flex(row, center, center);
      @include background-image('../imgs/left-bg.png', 100%, 100%);
      transition: all 0.5s;
    }
    .right-container {
      @include rect(calc(100% - v-bind(bindLeftWidth)), 100%);
      @include flex(row, center, center);
      transition: all 0.5s;
      background-color: rgba(255, 255, 255, 1);
    }
    // :deep(.el-input__wrapper) {
    //   background: none !important;
    //   input:-webkit-autofill {
    //     box-shadow: 0 0 0px 1000px transparent inset !important;
    //     background-color: transparent;
    //     background-image: none;
    //     transition: background-color 50000s ease-in-out 0s;
    //   }
    // }
  }
  .equipment-filing {
    font-family: 'PingFangSC-Bold';
    font-size: 16px;
    font-weight: bold;
    color: #a8aab2;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;
    cursor: pointer;
  }
}
</style>
